<template>
    <div id="home">
        <div class="header">
            <div class="companyName">
                长沙经济技术开发区水质净化工程有限公司
            </div>
            <div class="uploadTime">水量数据更新至{{ uploadTime }}</div>
            <img src="../assets/images/titilBg2.png" />
            <!-- <div class="toUpload" @click="toUpload">
                <el-icon color="#FFF" style="font-size: 35rem;" title="文件上传">
                    <UploadFilled />
                </el-icon>
            </div> -->
            <div
                v-show="type != 'app'"
                class="toUpload"
                style="left: 40rem"
                @click="toMain"
            >
                <el-icon color="#FFF" style="font-size: 35rem">
                    <HomeFilled />
                </el-icon>
            </div>
            <div
                class="yearSelect"
                :style="{ right: type != 'app' ? '40rem' : '340rem' }"
            >
                <label for="">年度：</label>
                <el-select
                    v-model="year"
                    class="m-2"
                    placeholder="请选择年度"
                    style="width: 70px"
                    @change="yearChange"
                    size="small"
                >
                    <el-option
                        v-for="item in yearList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="contain">
            <div class="cont-item cont-left">
                <!-- 全年完成情况 -->
                <annual-completion></annual-completion>
                <!-- 1-8月目标完成率 -->
                <completion-rate></completion-rate>
                <!-- 四厂水量目标完成情况 -->
                <completion-status></completion-status>
            </div>
            <div class="cont-item act cont-center">
                <!-- 2022年生产经营实时统计分析（水量更新至8月7日） -->
                <production-operation-statistical-analysis></production-operation-statistical-analysis>
                <!-- 全年完成率 -->
                <year-completion-rate></year-completion-rate>
                <!-- 公司全年处理水量 -->
                <treated-water-volume></treated-water-volume>
                <div class="cont-item-child">
                    <!-- 四厂日均水量对比 -->
                    <div class="cont-item-child-item">
                        <four-daily-water-volume-comparison></four-daily-water-volume-comparison>
                    </div>
                    <!-- 四厂能耗对比 -->
                    <div class="cont-item-child-item">
                        <four-energy-consumption-comparison></four-energy-consumption-comparison>
                    </div>
                </div>
            </div>
            <div class="cont-item cont-right">
                <!-- 财务收支情况 -->
                <finance-status></finance-status>
                <!-- 资产保值率 -->
                <asset-retention-ratio></asset-retention-ratio>
                <!-- 1-6月用水生产成本、处理成本 -->
                <production-processing-cost></production-processing-cost>
                <!-- 四厂用水处理成本 -->
                <four-processing-cost></four-processing-cost>
            </div>
        </div>
    </div>
</template>

<script setup>
import moment from "moment";
import { ref, provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import { UploadFilled, User, HomeFilled } from "@element-plus/icons-vue";
import AnnualCompletion from "@/components/contLeft/AnnualCompletion.vue";
import CompletionRate from "@/components/contLeft/CompletionRate.vue";
import CompletionStatus from "@/components/contLeft/CompletionStatus.vue";
import ProductionOperationStatisticalAnalysis from "@/components/contCenter/ProductionOperationStatisticalAnalysis.vue";
import YearCompletionRate from "@/components/contCenter/YearCompletionRate.vue";
import TreatedWaterVolume from "@/components/contCenter/TreatedWaterVolume.vue";
import FourDailyWaterVolumeComparison from "@/components/contCenter/FourDailyWaterVolumeComparison.vue";
import fourEnergyConsumptionComparison from "@/components/contCenter/fourEnergyConsumptionComparison.vue";
import FinanceStatus from "@/components/contRight/FinanceStatus.vue";
import AssetRetentionRatio from "@/components/contRight/AssetRetentionRatio.vue";
import FourProcessingCost from "@/components/contRight/FourProcessingCost.vue";
import ProductionProcessingCost from "@/components/contRight/ProductionProcessingCost.vue";
const uploadTime = ref(moment().add(-1, "day").format("MM月DD日"));
const router = useRouter();
const route = useRoute();
// const toUpload = () => {
//     router.push({ path: '/upload' })
// }
const type = ref(route.query.type);
console.log(type, "-------------------------------------");
const toMain = () => {
    router.push({ path: "/main" });
};
const year = ref();
const yearList = ref([
    { label: moment().format("YYYY"), value: moment().format("YYYY") },
    {
        label: moment().add(-1, "year").format("YYYY"),
        value: moment().add(-1, "year").format("YYYY"),
    },
]);
const yearChange = (year) => {
    if (year == moment().format("YYYY")) {
        uploadTime.value = moment().add(-1, "day").format("MM月DD日");
    } else {
        uploadTime.value = moment(year).endOf("year").format("MM月DD日");
    }
};
year.value = yearList.value[0].value;
provide("currentDataYear", year);
</script>
<style lang="less">
@import "@/assets/css/home.less";
</style>
